<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM学习</title>
</head>
<body>
 <div id = "div1">
   <p>dom学习</p>
   <ul id = "url1">
    <li>1<span>span</span></li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
   </ul>
</div>
    <script>
        // DOM document Object Model
        // 为了能让 js去操作页面中的元素。
// 1. 元素节点（Element Nodes）	表示HTML元素，如<div>、<p>等	<ul><li>nodeType值: 1</li><li>nodeName属性: 返回元素的标签名（大写）</li><li>nodeValue属性: 通常不包含值或返回null</li></ul>
// 2. 属性节点（Attribute Nodes）	表示HTML元素的属性，如class、id等	<ul><li>nodeType值: 2（注意：某些资料可能将属性节点列为其他类型，但在此上下文中，我们按照常见的分类方式将其视为节点类型2的变体或特殊形式，实际DOM标准中可能有所不同）</li><li>nodeName属性: 返回属性的名称</li><li>nodeValue属性: 返回属性的值</li></ul>
// 3. 文本节点（Text Nodes）	表示元素节点中的文本内容	<ul><li>nodeType值: 3</li><li>nodeName属性: 总是返回#text</li><li>nodeValue属性: 返回文本节点的内容</li></ul>
// childNodes 只能拿到孩子节点。不包含孙子节点。
// firstChild();文本节点
        window.onload = function (){
            let ul = document.getElementById("url1");
           // alert(ul.childNodes[0].nodeType);   //元素节点 1 文本节点 3
           // alert(ul.childNodes.length);  //会输出文本节点 dom节点类型 12种
           alert(ul.children.length); //只包含元素节点
           alert(ul.attributes[0].value); //拿到元素节点的属性。
           for(let i=0;i<ul.childNodes.length;i++){
            if(ul.childNodes[i].nodeType === 1){
                ul.style.backgroundColor='red';
            }
           }
        }
    </script>
</body>
</html>